<template>
  <div class="body">
    <el-row :gutter="0">
      <el-col :span="10" :offset="1"
        ><div id="main" style="height: 350px; width: 550px"></div
      ></el-col>
      <el-col :span="10" :offset="2"
        ><div id="main1" style="height: 350px; width: 550px"></div
      ></el-col>
    </el-row>
    <el-row :gutter="0">
      <el-col :span="10" :offset="1"
        ><div id="main2" style="height: 350px; width: 550px"></div
      ></el-col>
      <el-col :span="10" :offset="2"
        ><div class="grid-content bg-purple"></div
      ></el-col>
    </el-row>
  </div>
</template>
<style>
.body {
  margin-top: 20px;
  height: calc(100vh - 20px);
}
.el-row {
  margin-bottom: 20px;
  /* &:last-child {
    margin-bottom: 0;
  } */
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      com: {
        comname: [],
        stotal: [],
      },
      job: {
        job: [],
        wit: [],
      },
      job1: {
        job: [],
        cojob: [],
      },
    };
  },
  methods: {
    selectJob1: function () {
      var url = this.$store.state.ip + "/orders/selectJob1";
      // 参数
      //   let param = new URLSearchParams();
      this.$axios({
        method: "post",
        url: url,
        // data: param,
      }).then((res) => {
        console.log(res.data);
        this.job1.job[0] = res.data[0].job;
        this.job1.job[1] = res.data[1].job;
        this.job1.job[2] = res.data[2].job;
        this.job1.job[3] = res.data[3].job;
        this.job1.job[4] = res.data[4].job;

        this.job1.cojob[0] = res.data[0].cojob;
        this.job1.cojob[1] = res.data[1].cojob;
        this.job1.cojob[2] = res.data[2].cojob;
        this.job1.cojob[3] = res.data[3].cojob;
        this.job1.cojob[4] = res.data[4].cojob;
        this.test1();
      });
    },
    selectJob: function () {
      var url = this.$store.state.ip + "/orders/selectJob";
      // 参数
      //   let param = new URLSearchParams();
      this.$axios({
        method: "post",
        url: url,
        // data: param,
      }).then((res) => {
        console.log(res.data);
        this.job.job[0] = res.data[0].job;
        this.job.job[1] = res.data[1].job;
        this.job.job[2] = res.data[2].job;
        this.job.job[3] = res.data[3].job;
        this.job.job[4] = res.data[4].job;

        this.job.wit[0] = res.data[0].wit;
        this.job.wit[1] = res.data[1].wit;
        this.job.wit[2] = res.data[2].wit;
        this.job.wit[3] = res.data[3].wit;
        this.job.wit[4] = res.data[4].wit;
        this.test2();
      });
    },
    selectCom: function () {
      var url = this.$store.state.ip + "/orders/selectCom";
      // 参数
      //   let param = new URLSearchParams();
      this.$axios({
        method: "post",
        url: url,
        // data: param,
      }).then((res) => {
        console.log(res.data);
        this.com.comname[0] = res.data[4].comname;
        this.com.comname[1] = res.data[3].comname;
        this.com.comname[2] = res.data[0].comname;
        this.com.comname[3] = res.data[1].comname;
        this.com.comname[4] = res.data[2].comname;

        this.com.stotal[0] = res.data[4].stotal;
        this.com.stotal[1] = res.data[3].stotal;
        this.com.stotal[2] = res.data[0].stotal;
        this.com.stotal[3] = res.data[1].stotal;
        this.com.stotal[4] = res.data[2].stotal;
        this.test3();
      });
    },
    test1: function () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "热门职位",
        },
        tooltip: {},
        xAxis: {
          data: this.job1.job,
          axisLabel: { interval: 0, rotate: 30 },
        },
        yAxis: {},
        series: [
          {
            name: "投递数量",
            type: "bar",
            data: this.job1.cojob,
          },
        ],
      });
    },
    test2: function () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main1"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "职位防诈预警",
        },
        tooltip: {},
        xAxis: {
          data: this.job.job,
          axisLabel: { interval: 0, rotate: 30 },
        },
        yAxis: {},
        series: [
          {
            name: "缺口指数",
            type: "bar",
            data: this.job.wit,
          },
        ],
      });
    },
    test3: function () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main2"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "频繁充值",
        },
        xAxis: {
          type: "category",
          data: this.com.comname,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.com.stotal,
            type: "line",
          },
        ],
      });
    },
  },
  mounted() {
    this.selectJob1();
    this.selectJob();
    this.selectCom();
  },
};
</script>